<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <!-- <img :src="lotteryimg" :class="{pic: hasPic, blur: hasBlur}"> -->
          <h3 :class="{pic: hasPic, blur: hasBlur}">{{ lotteryimg }}</h3>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <ul>
            <li v-for="item in lotterys" :key="item" class="tt">抽中的祝福语：<strong>{{ item }} </strong></li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-button type="primary" @click="washCards">洗牌</el-button>
    <el-button type="primary" @click="goscroll">滚动</el-button>
    <el-button type="danger" @click="stopscroll">停</el-button>
  </div>
</template>

<script>
export default {
  name: "word",
  data() {
    return {
      sourindex: 0,
      hasPic: true,
      hasBlur: false,
      starting: false,
      lottery1: 0,
      flag: "",
      lotteryimg: "",
      autoplay: false,
      lotterys: [],
      lists: [
        '春天的钟声响,新年的脚步迈,祝新年的钟声,敲响你心中快乐的音符,幸运与平安,如春天的脚步紧紧相随!春华秋实,我永远与你同在!',
        '岁月可以褪去记忆,却褪不去我们一路留下的欢声笑语。祝你新春快乐,岁岁安怡!',
        '虽只是几句短短的问候祝节日快乐!却是我最真挚的祝福!',
        '新年的钟声悠然响起,飘送着我的祝福,萦绕在你的身边。',
        '朝阳是新生的力量，督促奋斗的人前进;初恋是懵懂的情愫，牵绊相爱的人心上;狗年是狗年的伊始，带来等待的人希望。朋友，狗年快乐!',
        '海豚想给天使一个吻可惜天太高了，天使想给海豚一个吻可惜海太深了，我想给你一个拥抱可惜太远了，只有给你发一条短信轻轻的告诉你：狗年快乐。',
        '祝您：狗年大吉，一如既往，二人同心，三口之家，四季欢唱，五福临门，六六顺意，七喜来财，八方鸿运，九九吉祥，十分美满!祝狗年快乐!',
        '新年辞旧岁，祝你在新的一年里，有新的开始，有新的收获，新年快乐，万事如意!',
        ' 一点喜，两点乐，三点美，四点欢，五点福，六点禄，七点吉，八点财，九点寿，十点富，十一点运，十二点子时钟声响，新年好运!鸡年万事顺意，平安幸福!',
        ' 与你相处的时间最多，和你协作的日子最好，跟你一起加班，跟你一起奋斗，同事情不比兄弟情差，值此新春佳节之际，愿你合家欢乐，连年有余，节后见!',
        ' 2018新年好!新年到，好事全到了!祝您及全家新年快乐!身体健康!工作顺利!吉祥如意!',
      ],
      animate: false,
      interval: 300,
      interval_1: 1000
    };
  },
  created() {
    //   setInterval不断调用(执行函数, 间隔时间)
  },
  methods: {
    showindex(index, src) {
      console.log(index);
      console.log("轮到索引:" + src);
      this.$message("点了:" + this.sourindex);
      this.lottery = this.lists[this.sourindex];
      //   删除这张图片所在索引
      this.lists.splice(this.sourindex, 1);
      this.$message("现在数组长度" + this.lists.length);
    },
    goscroll() {
      //   this.flag = setInterval(this.scroll,this.interval);
      this.starting = true;
      this.hasBlur = true;
      this.scrollv2();
      console.log(this.starting);
    },
    stopscroll() {
      //   clearInterval(this.flag);
      this.hasBlur = false;
      this.starting = false;
      console.log("停止时图片");
      console.log(this.lists[this.lottery1]);
      console.log("删除图片");
      this.lotterys.push(this.lists[this.lottery1]);
      this.lists.splice(this.lottery1, 1);
    },
    _fomatNum(num) {
      //   格式化成字符，长度补全
      num += "";
      let length = num.length;
      if (length === 1) {
        num = "000" + num;
      }
      if (length === 2) {
        num = "00" + num;
      }
      if (length === 3) {
        num = "0" + num;
      }
      return num;
    },
    washCards() {
      let tmp;
      let j;
      let lottery1;
      for (let i = 0; i < this.lists.length; i++) {
        tmp = this.lists[i];
        j = Math.floor(Math.random() * this.lists.length);
        this.lists[i] = this.lists[j];
        this.lists[j] = tmp;
      }
      console.log("--分隔线--");
      this.lists.forEach(function(item) {
        console.log(item);
      });
      this.lists.push(this.lists[0]);
      this.lists.shift();
      console.log("洗牌完成");
      //   console.log(this.lists)
    },
    scrollv2() {
      if (this.starting == false) {
        return false;
      }
      else if (this.lists.length == 1)
      {
        this.$message.error('剩下不够抽了')
     return false;
      }
       else {
        this.lottery1 = Math.floor(Math.random() * this.lists.length);
        // console.log("中奖的是:" + this.lottery1);
        // console.log(this.lists[this.lottery1].src);
        this.lotteryimg = this.lists[this.lottery1];
        setTimeout(() => {
          this.scrollv2();
        }, 50);
      }
    },
    sTop() {
      this.autoplay = !this.autoplay;
      this.hasBlur = false;
      console.log("随机数" + Math.floor(Math.random() * 10));
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-row {
    margin-top: 5px;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  margin-left: 10px;
  // background: #e5e9f2;
  .tt {
    margin: 10px auto;
    text-align: left;
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.anim {
  transition: all 1.5s;
  margin-top: -34px;
}
.pic {
  width: 640px;
  height: 480px;
}
.blur {
  /* -webkit-filter: blur(1px); Chrome, Opera */
  /* -moz-filter: blur(10px); */
  /* -ms-filter: blur(10px); */
  filter: blur(1px);
}
.txtblur { 
    color: transparent;
    text-shadow: #111 0 0 5px;
}
</style>